Outlaw Design Blog

Some simple Ajax scripts can go a long way in your design. These simple elements can help improve your user experience, make the site more sensible, or just give it some added flare. Here are a few of our favorite Tool Tips, Lightboxes, Galleries, and Tabs.

Tool Tips

jTip – A jQuery Tool Tip: jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.

Nice Titles: A nice midification of Stuart Langridge’s Nice Title script.

Form Field Hints: It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

Simple Tooltip: A simple and unobtrusive Javascript tool tip that could easily be added to html link elements and completely be controlled with CSS.

BoxOver: BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript.

MooTools Tips: Display a tip on any element with a title and/or href. Super easy to use and setup.

Hoover Tip: The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Cool Tool Tips: Using CSS and few lines of JavaScript it is possible to make tooltips whose contents can be any HTML, including images, tables, whatever can fit into a div tag.

More Tool Tip Resources

40+Tooltips Scripts with Ajax via Smashing Magazine
23 Best Ajax Tooltips and Balloons via PHP Ajax Code Blog
List of 25 Javascript/Ajax & CSS Tooltip Scripts via Koller Media

Tabs

YUI TabView: TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (li). The root element of the TabView is a div element.

Moo FX Accordian: A slick and simple tabs with Moo FXs.

Sliding Tabs: A nice tab style script with some slick moo tools effects for an added bonus.

Control Tabs: Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.

Coda Slider: Tabs with a slide transition between the tabs using Jquery.

Perspective Tabs: Perspective tabs (formerly Sliding Tabs) is a simple mootools plug-in that allows for a lagre number of tabs to fit into a small space.

Jquery Tab Skin: A JQuery style fade animation that runs as the user navigates between selected tabs.

Fancy Slide Tabs: The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu.

Advanced Tabs: This TabPanel is built entirely with javascript and demonstrates tab resizing, scrolling, and tabs with icons.

Ajax Tabs w/ Content: This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs

Easy Tabs: A new Version of the free EasyTabs Script is available. You can now set a autochange modus to one of your menus. Accessible compact and compatible with all browsers as always.

Lightboxes & Galleries

Smooth Gallery: A lot of changes since the orginal. A supe rpopular image gallery script w/mootools. Version 2.0 is out and a lot of changes have been made since v1.0.1… A lot of bugfixes, yeah. But also new features !

Thick Box:ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Trip Tracker: The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

Lightbox 2: the original light box that started it all.

Grey Box: GreyBox can be used to display websites, images and other content in a beautiful way.

Flash LightBox: flashLightBoxInjector is a PrototypeJS class that bridges the gap between Flash and Lightbox2. Not only does flashLightBoxInjector let you start an already existing Lightbox driven gallery (viz. static HTML), it also lets you dynamically build a list of images to show through Lightbox (viz. inject the needed HTML from within Flash)

Liteview: Lightview was built to change the way you overlay content on a website. Clean: Designed to compliment your content. Fast: Smart image preloading. Easy to customize: You don’t even have to know CSS.

Facebox: Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Multibox: A lightbox that supports images, flash, video, mp3s, html.

Moodal Box: A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.

It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.